<template>
  <view class="page">
    <!-- 顶部车辆卡片 -->
    <view class="car-card">
      <image class="car-img" :src="carInfo.image" mode="aspectFill"></image>
      <view class="car-text">
        <view>{{ carInfo.name }}</view>
        <view class="sub">{{ carInfo.price }}</view>
        <view class="vin">{{ carInfo.plate }}</view>
      </view>
      <view class="tag" :class="carInfo.type">{{ carInfo.typeText }}</view>
    </view>

    <!-- 材料提交 -->
    <view class="section">
      <view class="section-title">材料提交</view>
      <view class="form-card">

        <!-- 变更后车牌 -->
        <view class="cell">
          <view class="label">变更后车牌</view>
          <input class="ipt" type="text" v-model="form.newPlateNo" placeholder="请输入" />
          <text class="ic">✎</text>
        </view>

        <!-- 合同上传 -->
        <view class="cell" @tap="chooseImage('contract')">
          <view class="label">合同上传</view>
          <view class="value">{{ pics.contract ? '已选择' : '未上传' }}</view>
          <image
            v-if="pics.contract"
            class="thumb"
            :src="pics.contract"
            mode="aspectFill"
            @tap.stop="previewImage('contract')"
          />
          <text class="iconfont icon-tupian ic"></text>
        </view>

        <!-- 合同附件上传 -->
        <view class="cell" @tap="chooseImage('contractAttachment')">
          <view class="label">合同附件上传</view>
          <view class="value">{{ pics.contractAttachment ? '已选择' : '未上传' }}</view>
          <image
            v-if="pics.contractAttachment"
            class="thumb"
            :src="pics.contractAttachment"
            mode="aspectFill"
            @tap.stop="previewImage('contractAttachment')"
          />
          <text class="iconfont icon-tupian ic"></text>
        </view>

        <!-- 登记证上传（过户后） -->
        <view class="cell" @tap="chooseImage('registration')">
          <view class="label">登记证上传（过户后）</view>
          <view class="value">{{ pics.registration ? '已选择' : '未上传' }}</view>
          <image
            v-if="pics.registration"
            class="thumb"
            :src="pics.registration"
            mode="aspectFill"
            @tap.stop="previewImage('registration')"
          />
          <text class="iconfont icon-tupian ic"></text>
        </view>

        <!-- 行驶证上传（过户后） -->
        <view class="cell" @tap="chooseImage('license')">
          <view class="label">行驶证上传（过户后）</view>
          <view class="value">{{ pics.license ? '已选择' : '未上传' }}</view>
          <image
            v-if="pics.license"
            class="thumb"
            :src="pics.license"
            mode="aspectFill"
            @tap.stop="previewImage('license')"
          />
          <text class="iconfont icon-tupian ic"></text>
        </view>

        <!-- 销售发票 -->
        <view class="cell" @tap="chooseImage('invoice')">
          <view class="label">销售发票</view>
          <view class="value">{{ pics.invoice ? '已选择' : '未上传' }}</view>
          <image
            v-if="pics.invoice"
            class="thumb"
            :src="pics.invoice"
            mode="aspectFill"
            @tap.stop="previewImage('invoice')"
          />
          <text class="iconfont icon-tupian ic"></text>
        </view>

        <!-- 付款截图 -->
        <view class="cell" @tap="chooseImage('paymentScreenshot')">
          <view class="label">付款截图</view>
          <view class="value">{{ pics.paymentScreenshot ? '已选择' : '未上传' }}</view>
          <image
            v-if="pics.paymentScreenshot"
            class="thumb"
            :src="pics.paymentScreenshot"
            mode="aspectFill"
            @tap.stop="previewImage('paymentScreenshot')"
          />
          <text class="iconfont icon-tupian ic"></text>
        </view>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="bottom-btn-box">
      <button class="submit-btn" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
import common_config from '@/static/js/common.js';
var config = common_config.config;
var userInfo;

export default {
  data() {
    return {
      // 车辆信息（从上一页传递）
      carInfo: {
        id: '',
        name: '',
        vin: '',
        plate: '',
        image: '',
        price: '',
        type: '',
        typeText: ''
      },

      // 表单数据
      form: {
        newPlateNo: '' // 变更后车牌
      },

      // 图片
      pics: {
        contract: '', // 合同
        contractAttachment: '', // 合同附件
        registration: '', // 登记证
        license: '', // 行驶证
        invoice: '', // 销售发票
        paymentScreenshot: '' // 付款截图
      }
    }
  },

  onLoad(options) {
    // 获取传递过来的车辆信息
    this.carInfo.id = options.id || '';
    this.carInfo.name = decodeURIComponent(options.car_name || '');
    this.carInfo.vin = decodeURIComponent(options.vin || '');
    this.carInfo.plate = decodeURIComponent(options.plate || '');
    this.carInfo.image = decodeURIComponent(options.image || 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/yuanxiang/logo2.png');
    this.carInfo.price = '新车指导价 38.88万元';
    this.carInfo.type = options.type || 'sale';
    this.carInfo.typeText = this.carInfo.type === 'purchase' ? '采购' : '销售';

    // 获取用户信息
    common_config.common_if_login(() => {}, () => {
      userInfo = uni.getStorageSync('userInfo');
      try { userInfo = JSON.parse(userInfo); } catch(e) {}
    });
  },

  methods: {
    // 选择图片
    chooseImage(key) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.$set(this.pics, key, tempFilePath);
        }
      });
    },

    // 预览图片
    previewImage(key) {
      const url = this.pics[key];
      if (url) {
        uni.previewImage({
          urls: [url],
          current: 0
        });
      }
    },

    // 提交表单
    submit() {
      uni.showLoading({ title: '提交中' });
      
      /**
       * 接口说明：
       * 接口地址：config.request_url + '/index/business/material_submit?token=' + userInfo.token
       * 请求方式：POST
       * 请求参数：
       * {
       *   id: '',                      // 业务ID
       *   new_plate_no: '',            // 变更后车牌
       *   contract: '',                // 合同图片URL（需先上传）
       *   contract_attachment: '',     // 合同附件URL
       *   registration: '',            // 登记证URL
       *   license: '',                 // 行驶证URL
       *   invoice: '',                 // 销售发票URL
       *   payment_screenshot: ''       // 付款截图URL
       * }
       */
      
      // 模拟提交
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        
        // 提交成功后跳转到材料审核页面
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/business/material_review?id=' + this.carInfo.id + 
                 '&car_name=' + encodeURIComponent(this.carInfo.name) +
                 '&vin=' + encodeURIComponent(this.carInfo.vin) +
                 '&plate=' + encodeURIComponent(this.carInfo.plate) +
                 '&image=' + encodeURIComponent(this.carInfo.image) +
                 '&type=' + this.carInfo.type
          });
        }, 1500);
      }, 1000);
    }
  }
}
</script>

<style>
/* 页面与卡片 - 参考 pinggu1 */
.page {
  background: #f6f8ff;
  min-height: 100vh;
  padding: 32rpx 32rpx 140rpx;
}

.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
}

.car-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  display: flex;
  gap: 20rpx;
  align-items: center;
  margin-bottom: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.car-img {
  width: 220rpx;
  height: 130rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.car-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.car-text .sub {
  color: #777;
  font-size: 26rpx;
}

.vin {
  font-size: 26rpx;
  color: #888;
  margin-top: 4rpx;
}

/* 类型标签 - 右下角 */
.car-card {
  position: relative;
}

.car-card .tag {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  font-size: 24rpx;
  color: #fff;
  border-radius: 6rpx;
  padding: 4rpx 12rpx;
  white-space: nowrap;
}

.car-card .tag.purchase {
  background-color: #FF9500;
}

.car-card .tag.sale {
  background-color: #FF3B30;
}

/* 表单表格 */
.form-card {
  background: #fff;
  border: 1rpx solid #e8eef6;
  border-radius: 16rpx;
  overflow: hidden;
}

.cell {
  display: flex;
  align-items: center;
  padding: 22rpx 18rpx;
  border-bottom: 1rpx solid #edf2f7;
  transition: background .15s, border-color .15s;
}

.cell:last-child {
  border-bottom: none;
}

.label {
  width: 240rpx;
  font-size: 28rpx;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.value {
  flex: 1;
  font-size: 28rpx;
  color: #64748b;
}

.ipt {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 28rpx;
  color: #111827;
}

.ic {
  width: 44rpx;
  text-align: right;
  font-size: 30rpx;
  color: #9aa5b1;
  margin-left: 10rpx;
}

.thumb {
  width: 72rpx;
  height: 72rpx;
  border-radius: 8rpx;
  margin-right: 12rpx;
}

input::placeholder {
  color: #a3aab3;
}

/* 提交按钮 */
.bottom-btn-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 18rpx 28rpx;
  box-shadow: 0 -4rpx 10rpx rgba(0,0,0,0.06);
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: #007aff;
  color: #fff;
  font-size: 30rpx;
  border-radius: 45rpx;
  font-weight: 600;
  border: none;
}

.submit-btn:active {
  opacity: .92;
}
</style>

